<template>
  <el-dialog :visible.sync="currentVisible"
             :title="id ? $t('add') : $t('update')"
             destroy-on-close
             custom-class="user-modal"
             width="920px">
    <UserAddForm v-if="model === 'add'"
                 :connectorSetting="connectorSetting" />
    <UserEditForm v-if="model === 'edit'"
                  :id="id"
                  :connectorSetting="connectorSetting" />
  </el-dialog>
</template>

<script>
import UserAddForm from './user-add-form'
import UserEditForm from './user-edit-form'

export default {
  name: 'UserModal',
  components: {
    UserAddForm,
    UserEditForm
  },
  props: {
    id: String,
    visible: Boolean,
    connectorSetting: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    currentVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', !!val)
      }
    },
    model () {
      return this.id ? 'edit' : 'add'
    }
  }
}
</script>
